<template lang="pug">
  .chief
    .inner
      .h-logo
        img(src="static/image/z_logo.png" @click='$router.push({path:"/choosePage"})' style='cursor:pointer')
        span.h-title(@click='$router.push({path:"/choosePage"})' style='cursor:pointer') 布勒人参
      .personal
        .back
          i <
          span(@click='back') 返回
        img(src="static/image/z_user.png" id="user")
        .h-user
          span(@click="detail2()") {{name || "未登录"}}
          img(src="static/image/z_solidArrd.png" id="whirl2" @click="detail2()")
          .dropContent2
            ul(@mouseleave='close')
              li(data-title="个人资料" @click="changePage('ginsenguser')") 个人资料
              li(data-title="我的资产" @click="changePage('assetss')") 我的资产
              li(:data-title="gametype+'余额'" @click="changePage('index_ginseng_balance')") {{gametype}}余额
              li(data-title="游戏日志" @click="changePage('index_gameLog')") 游戏日志
              li(data-title="炼丹结果" @click="changePage('index_result')") 炼丹结果
              li(data-title="退出" @click="closee()") 退出
  //
</template>
<script>
import $ from "jquery";
export default {
  name: "chief",
  data() {
    return {
      name: "",
      gametype: u.getStore("winning") && u.getStore("winning").bitype
    };
  },
  computed: {},
  created() {
    this.userchange();
  },
  mounted() {
    this.setShadow();
  },
  methods: {
    back() {
      history.back();
    },
    userchange() {
      var that = this;
      var timer = setInterval(() => {
        if (u.getStore("user")) {
          that.name = u.getStore("user").name;
        }
      }, 10);
    },
    closee() {
      u.removeStore("user");
      this.name = "";
      this.$router.push({ path: "/login" });
      this.close();
    },
    setShadow() {
      var path = location.pathname.split("/")[1];
      if (path === "ginsenguser") {
        $(".dropContent2 li:eq(0)").css({
          color: "#c7c7c7",
          background: 'url("../../static/image/chiefbtn2.png") no-repeat'
        });
      } else if (path === "assetss") {
        $(".dropContent2 li:eq(1)").css({
          color: "#c7c7c7",
          background: 'url("../../static/image/chiefbtn2.png") no-repeat'
        });
      }
    },
    detail2() {
      $(this).toggleClass(function() {
        if ($("#whirl2").hasClass("appear1")) {
          $("#whirl2")
            .removeClass("appear1")
            .addClass("appear2");
          document.getElementsByClassName("dropContent2")[0].style.display =
            "none";
        } else {
          $("#whirl2")
            .removeClass("appear2")
            .addClass("appear1");
          document.getElementsByClassName("dropContent2")[0].style.display =
            "block";
        }
      });
    },
    changePage(pathname) {
      this.$router.push({ path: "/" + pathname });
      location.reload();
    },
    close() {
      $("#whirl2")
        .removeClass("appear1")
        .addClass("appear2");
      document.getElementsByClassName("dropContent2")[0].style.display = "none";
    }
  },
  components: {}
};
</script>
<style lang="stylus" scoped>
.appear1 {
  animation: rotateBox1 0.5s linear;
  animation-fill-mode: forwards;

  @keyframes rotateBox1 {
    from {
      transform: rotate(0deg);
    }

    to {
      transform: rotate(180deg);
    }
  }
}

.appear2 {
  animation: rotateBox2 0.5s linear;
  animation-fill-mode: forwards;

  @keyframes rotateBox2 {
    from {
      transform: rotate(180deg);
    }

    to {
      transform: rotate(0deg);
    }
  }
}

.chief {
  display: flex;
  align-items: center;
  min-width: 1200px;
  height: 80px;
  background: white;

  .inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin: 0 auto;
    width: 1286px;
    vertical-align: middle;

    .h-logo {
      display: flex;
      align-items: center;

      .h-title {
        margin-left: 15px;
        font-size: 30px;
        color: #c7a062;
      }
    }

    .personal {
      display: flex;
      align-items: center;
      float: right;

      i {
        color: #c7a062;
        font-size: 18px;
        margin-right: 8px;
        cursor: pointer;
      }

      span {
        color: #c7a062;
        font-size: 16px;
        margin-right: 10px;
        cursor: pointer;
      }

      #user {
        width: 50px;
        height: 50px;
        border-radius: 50%;
      }

      .h-user {
        display: flex;
        align-items: center;
        position: relative;
        font-size: 14px;
        color: #1a1a1a;

        >span {
          margin: 0 10px;
          cursor: pointer;
        }

        #whirl2 {
          margin-right: 10px;
          cursor: pointer;
        }

        .dropContent2 {
          display: none;
          padding: 10px;
          position: absolute;
          top: 37px;
          right: 0;
          width: 194px;
          min-height: 360px;
          text-align: center;
          background-image: url('../../static/image/dropbg2.png');
          z-index: 1000;
          background-repeat: no-repeat;
          background-size: 100% 100%;

          ul {
            li {
              margin: 0 auto;
              margin-top: 20px;
              margin-bottom: 20px;
              width: 135px;
              height: 45px;
              line-height: 40px;
              color: white;
              font-size: 16px;
              cursor: pointer;
              background: url('../../static/image/chiefbtn1.png') no-repeat;
              position: relative;
              z-index: 0;

              &:before {
                content: attr(data-title);
                position: absolute;
                -webkit-text-stroke: 3px #ca8515;
                z-index: -1;
              }

              &:active {
                color: #c7c7c7;
                background: url('../../static/image/chiefbtn2.png') no-repeat;
              }
            }
          }
        }
      }
    }
  }
}
</style>
